<template>
  <div id="tencentMapBox">
    这是一个腾讯地图演示版本 3D / 2D 显示模式控制
    <div id="container" />
    <div id="button-box">
      <el-button type="primary" @click="checkted2D">2D模式</el-button>
      <el-button type="primary" @click="checkted3D">3D模式</el-button>
    </div>
  </div>
</template>

<script>
/* eslint-disable no-undef */
export default {
  name: 'TencentMapDisplayControl',
  data() {
    return {
      map: null,
      temp: null,
      option: {
        center: new TMap.LatLng(39.984120, 116.307484), // 设置地图中心点坐标
        pitch: 43.5, // 设置俯仰角
        rotation: 45, // 设置地图旋转角度
        zoom: 17 // 设置地图缩放级别
      }
    }
  },
  created() {
    this.$nextTick(() => {
      this.initMap()
    })
  },
  methods: {
    initMap() {
      console.log(window)
      this.temp = document.getElementById('container')
      const confg = {
        viewMode: '2D'
      }
      const option = Object.assign(this.option, confg)
      this.map = new TMap.Map(this.temp, option)
    },
    checkted2D() {
      this.resetDom()
      const confg = {
        viewMode: '2D'
      }
      const option = Object.assign(this.option, confg)
      this.map = new TMap.Map(this.temp, option)
    },
    checkted3D() {
      this.resetDom()
      const confg = {
        viewMode: '3D'
      }
      const option = Object.assign(this.option, confg)
      console.log(option)
      this.map = new TMap.Map(this.temp, option)
    },
    resetDom() {
      this.temp.remove()
      const tencentMapBox = document.getElementById('tencentMapBox')
      this.temp = document.createElement('div')
      this.temp.id = 'container'
      tencentMapBox.insertBefore(this.temp, tencentMapBox.childNodes[0])
    }
  }
}
</script>

<style>
</style>
